// 一、第三方库
import React, {memo, Suspense} from 'react';
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from "react-router-config";
import { Provider } from 'react-redux';

// 二、自己编写得功能js文件(网络请求文件)
import routes from "./router";
import store from "./store";


// 三、组件
import CJXOnLoading from "@/components/onLoading";
import CJXAppHeader from "@/components/app-header";
import CJXAppFooter from "@/components/app-footer";
import CJXAppPlayerBar from "@/pages/player/app-player-bar";




export default memo(function App() {
    return (
        <Provider store={store}>
            <BrowserRouter>
                <CJXAppHeader/>

                {/* 使用了路由懒加载 必须使用 Suspense 组件 把路由包裹起来  
                fallback 的做作用是 页面还没有加载出来会显示 fallback里面的组件内容作用占位*/}
                <Suspense fallback={<CJXOnLoading />}>
                    {renderRoutes(routes)}
                </Suspense>
                
                
                <CJXAppFooter/>

                <CJXAppPlayerBar />
            </BrowserRouter>
        </Provider>
        
    )
});

// export default function App () {

//     return (
//         <div>App</div>
//     )
// }





